<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: Label containers</title>
  
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../../../lib/yui/reset-fonts/reset-fonts.css" /> 

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../../assets/WireIt.css" />

<!-- YUI -->
<script type="text/javascript" src="../../../lib/yui/utilities/utilities.js"></script>

<script type="text/javascript" src="../../../lib/excanvas.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../../../build/wireit-inputex-min.js"></script>

<script type="text/javascript" src="../js/LayerContainer.js"></script>



<style>
body {
	font-size: 10px;
}


div.WireIt-LayerContainer div.body {
	background-color: transparent;
}

div.WireIt-LayerContainer div.WireIt-Layer {
	background-color: transparent;
}

</style>

</head>
<body>
	
<script>

	var demoLayer;

	YAHOO.util.Event.addListener(window, 'load', function() {
		
		// Layer Demo
	  demoLayer = new WireIt.Layer({layerMap: false});
		
		// You can use a global setWiring method	
		demoLayer.setWiring(
			{
			    "containers": [{
			        "position": [0,0],
			        "xtype": "WireIt.LayerContainer",
							title: "when",
							"terminals": [
			 					{"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 115}, editable: false },
								{"name": "out", direction: [0,1], offsetPosition: {bottom: -50, left: 115} }
			 				]
			    },
			    {
			        "position": [600, 167],
			        "xtype": "WireIt.LayerContainer",
							title: "otherwise",
							"terminals": [
			 					{"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 115}, editable: false },
								{"name": "out", direction: [0,1], offsetPosition: {bottom: -50, left: 115} }
			 				]
			    },
			    {
			        "position": [469, 42],
			        "xtype": "WireIt.Container",
							title: "choose",
							width: 200,
							"terminals": [
			 					{"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 90}, editable: false },
								{"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 90} }
			 				]
			    },
			    {
			        "position": [462, 550],
			        "xtype": "WireIt.Container",
							title: "output",
							width: 200,
							"terminals": [
			 					{"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 90}, editable: false },
								{"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 90} }
			 				]
			    }],
			    "wires": [{
			        "xtype": "WireIt.BezierWire",
			        "src": {
			            "moduleId": 2,
			            "terminal": "out"
			        },
			        "tgt": {
			            "moduleId": 0,
			            "terminal": "in"
			        }
			    },
			    {
			        "xtype": "WireIt.BezierWire",
			        "src": {
			            "moduleId": 2,
			            "terminal": "out"
			        },
			        "tgt": {
			            "moduleId": 1,
			            "terminal": "in"
			        }
			    },
			    {
			        "xtype": "WireIt.BezierWire",
			        "src": {
			            "moduleId": 0,
			            "terminal": "out"
			        },
			        "tgt": {
			            "moduleId": 3,
			            "terminal": "in"
			        }
			    },
			    {
			        "xtype": "WireIt.BezierWire",
			        "src": {
			            "moduleId": 1,
			            "terminal": "out"
			        },
			        "tgt": {
			            "moduleId": 3,
			            "terminal": "in"
			        }
			    }]
			});

	});
</script>
</body>
</html>